<template>
	<view class="content" :class="{'active':active}">
		<view class="tabbar-box-wrap">
			<view class="tabbar-box">
				<view class="tabbar-box-item" @longpress="startRecord" @touchmove="touchMove" @touchstart="touchStart"
					@touchend="stopRecord">
					<image class="box-image" src="https://staticfile-yj.obs.myhuaweicloud.com/tab-more1.png"
						mode="aspectFit"></image>
				</view>
				<view class="tabbar-box-item middle-item" @click="toggle('center')">
					<image class="box-image" src="https://staticfile-yj.obs.myhuaweicloud.com/tab-more3.png"
						mode="aspectFit"></image>
				</view>
				<view class="tabbar-box-item" @click="goTo('../../takePhotos/takePhotos')">
					<image class="box-image" src="https://staticfile-yj.obs.myhuaweicloud.com/tab-more2.png"
						mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="popup">
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<uni-row class="row-top">
					<uni-col :span="4" :offset="10">
						<view class="item" @click="goTo('../../callList/callList?id=role007')">供销员</view>
					</uni-col>
				</uni-row>
				<uni-row class="row-middle" style="top: -10px;">
					<uni-col :span="4" :offset="6">
						<view class="item" @click="goTo('../../callList/callList?id=role005')">帮扶员</view>
					</uni-col>
					<uni-col :span="4" :offset="4">
						<view class="item" @click="goTo('../../callList/callList?id=role004')">农技员</view>
					</uni-col>
				</uni-row>
				<uni-row class="row-bottom" style="top: -10px;">
					<uni-col :span="4" :offset="2">
						<view class="item" @click="goTo('../../callList/callList?id=role008')">信贷员</view>
					</uni-col>
					<uni-col :span="4" :offset="12">
						<view class="item" @click="goTo('../../callList/callList?id=role006')">宣传员</view>
					</uni-col>
				</uni-row>
			</uni-popup>
		</view>
		<uni-popup ref="recordpopup" type="center">
			<view class="record-bg">
				<image mode="scaleToFill" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/recording.gif">
				</image>
				<text class="text">{{time}}秒</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		baseurl
	} from "@/api/user.js"
	import permision from "@/js_sdk/wa-permission/permission.js"
	var recorderManager = null;
	export default {
		data() {
			return {
				active: false,
				time: 0,
				timer: ''
			};
		},
		onLoad() {
			recorderManager = uni.getRecorderManager();
		},
		onShow() {
			// setTimeout(() => {
			this.active = true;
			// }, 500);
		},
		onHide() {
			this.active = false;
		},
		methods: {
			async startRecord() { //开始录音
				/* // #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
				// #endif
 */
				// TODO ios 在没有请求过权限之前无法得知是否有相关权限，这种状态下需要直接调用录音，但没有状态或回调判断用户拒绝
				
				permision.requestAndroidPermission('android.permission.RECORD_AUDIO').then((res)=>{
					console.log("authres",res)
					if(res == 1){
						this.$refs.recordpopup.open()
						this.timer = setInterval(() => {
							this.time++;
						}, 1000)
						recorderManager.start({
							format: 'mp3'
						});
					}else{
						permision.gotoAppPermissionSetting()
					}
				})
				// const appAuthorizeSetting = uni.getAppAuthorizeSetting()
				// console.log("appauthor",appAuthorizeSetting)
				// console.log("recordstart")
				// if(appAuthorizeSetting.microphoneAuthorized == 'authorized'){
					
				// }else{
				// 	uni.openAppAuthorizeSetting({
				// 	  success (res) {
				// 	    console.log(res)
				// 	  }
				// 	})
				// }	
			},
			touchStart(e) {
				console.log("start", e)
			},
			touchMove(e) {
				console.log("move", e)
			},
			stopRecord() { //停止录音
				console.log("stop")
				recorderManager.stop();
				this.$refs.recordpopup.close()
				clearInterval(this.timer);
				this.time = 0
				recorderManager.onStop((res) => {
					console.log("res.tempFilePath1",res.tempFilePath)
					let arr = res.tempFilePath.split('=')
					let record = JSON.stringify(arr) ;
					console.log("recordtest",record)
					uni.navigateTo({
						url: `../../search/searchList/searchList?record=${record}`
					})
					/* console.log('on stop', res.tempFilePath);
					let cookie = uni.getStorageSync('X-Token')
					let formdata = {
						"sourceType": 0,
						"pageSize": "10",
						"pageNum": "1"
					}
					let baseParams = {
						// 请求接口地址
						url: baseurl + "/nb-app/1.0.1/SearcherService/speakEngineResources",

						// 请求类型
						filePath: res.tempFilePath,
						// 请求参数
						name: 'file',
						// 请求头
						header: {
							'Cookie': `X-Token=${cookie}`,
							//'content-type': 'application/x-www-form-urlencoded'
						},
						formData: {
							formData: JSON.stringify(formdata)
						},
					}

					console.log('APP')

					console.log('on stop', res.tempFilePath, 'wx');
					uni.uploadFile({
						...baseParams,
						success: (res) => {
							console.log(res)
							let temp = JSON.parse(res.data)
							if (temp.success) {
								let keyWord = temp.returnObj.keyword
								console.log("keyWord", keyWord)
								this.goTo(`../../search/searchList/searchList?keyword=${keyWord}`)
							} else {
								uni.showToast({
									title: JSON.parse(res.msgContent),
									icon: 'none'
								})
								return
							}
						}
					})
 */
				});

				//clearInterval(recordTimeInterval);
			},
			goTo(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			toggle() {
				this.$refs.popup.open('bottom')
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		transition: opacity 0.3s;
		background-image: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/tabbg.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		opacity: 0;

		&.active {
			opacity: 1;
		}
	}

	.tabbar-box-wrap {
		position: absolute;
		width: 100%;
		padding: 20rpx 100rpx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;

		.tabbar-box {
			position: relative;
			display: flex;
			width: 100%;
			padding: 15rpx 10%;
			box-sizing: border-box;
			z-index: 2;

			.tabbar-box-item {
				// position: relative;
				width: 100%;
				z-index: 3;
				margin: 10rpx;
				text-align: center;

				.box-image {
					width: 100%;
					height: $uni-img-size-lg;
				}
			}

			.tabbar-box-item.middle-item {
				margin-top: -80rpx
			}
		}
	}

	.popup {
		width: 100%;

		/deep/.uni-popup .uni-popup__wrapper {
			width: 100%;
			bottom: 80px;
			left: 30rpx;
		}

		.item {
			display: inline-block;
			width: 45px;
			height: 45px;
			border-radius: 100%;
			text-align: center;
			line-height: 45px;
			color: #ffffff;
			background-color: #22AFFF;
			font-size: 12px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.record-bg {
		width: 340rpx;
		padding: 30rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		background: url('https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/record-bg.png') no-repeat center center;
		background-size: 100% 100%;
		height: 160rpx;
		text-align: center;

		.text {
			height: 30px;
			line-height: 30px;
			color: #ffffff;
			font-size: 28rpx;
		}
	}

	.record-bg image {
		width: 100%;
		height: 30px;
	}
</style>